<template>
    <div class="modern-button">
        <button class="btn-modern theme-btn" @click="openThemeSettings">
            <div class="btn-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2Z" fill="#ff4444"/>
                    <path d="M21 9C22.1 9 23 9.9 23 11C23 12.1 22.1 13 21 13C19.9 13 19 12.1 19 11C19 9.9 19.9 9 21 9Z" fill="#ff8800"/>
                    <path d="M3 9C4.1 9 5 9.9 5 11C5 12.1 4.1 13 3 13C1.9 13 1 12.1 1 11C1 9.9 1.9 9 3 9Z" fill="#ffff00"/>
                    <path d="M6 20C7.1 20 8 20.9 8 22C8 23.1 7.1 24 6 24C4.9 24 4 23.1 4 22C4 20.9 4.9 20 6 20Z" fill="#00ff00"/>
                    <path d="M18 20C19.1 20 20 20.9 20 22C20 23.1 19.1 24 18 24C16.9 24 16 23.1 16 22C16 20.9 16.9 20 18 20Z" fill="#0088ff"/>
                    <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
                    <path d="M12 4L21 11L18 22L6 22L3 11L12 4Z" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.5"/>
                </svg>
            </div>
            <span class="btn-text">Theme</span>
        </button>
        <el-dialog v-model="dialogVisible" title="主题设置" width="50%" :append-to-body="true" style="height: auto; max-height: 80vh; overflow-y: auto;">
            <div class="settings-container">
                <div class="setting-section">
                    <h3>背景设置</h3>
                    <div class="setting-item">
                        <label>特效开关:</label>
                        <el-switch v-model="effectsEnabled" @change="handleEffectsToggle" active-text="开启" inactive-text="关闭"></el-switch>
                    </div>
                    <div class="setting-item" v-show="effectsEnabled">
                        <label>效果类型:</label>
                        <el-select v-model="selectedEffect" @change="handleEffectChange" style="width: 100%;">
                            <el-option label="波浪 (Waves)" value="waves"></el-option>
                            <el-option label="雾气 (Fog)" value="fog"></el-option>
                            <el-option label="云朵 (Clouds)" value="clouds"></el-option>
                            <el-option label="环形 (Rings)" value="rings"></el-option>
                            <el-option label="鸟群 (Birds)" value="birds"></el-option>
                            <el-option label="细胞 (Cells)" value="cells"></el-option>
                            <el-option label="云朵2 (Clouds2)" value="clouds2"></el-option>
                            <el-option label="点阵 (Dots)" value="dots"></el-option>
                            <el-option label="地球 (Globe)" value="globe"></el-option>
                            <el-option label="光环 (Halo)" value="halo"></el-option>
                            <el-option label="网格 (Net)" value="net"></el-option>
                            <el-option label="拓扑 (Topology)" value="topology"></el-option>
                            <el-option label="树干 (Trunk)" value="trunk"></el-option>
                        </el-select>
                    </div>
                </div>

                <!-- 通用参数设置 -->
                <div class="setting-section" v-show="effectsEnabled">
                    <h3>通用参数</h3>
                    <div class="setting-item">
                        <label>缩放比例:</label>
                        <el-slider v-model="commonSettings.scale" :min="0.5" :max="2" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>移动端缩放比例:</label>
                        <el-slider v-model="commonSettings.scaleMobile" :min="0.5" :max="2" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>鼠标控制:</label>
                        <el-switch v-model="commonSettings.mouseControls" @change="handleSwitchChange"></el-switch>
                    </div>
                    <div class="setting-item">
                        <label>触摸控制:</label>
                        <el-switch v-model="commonSettings.touchControls" @change="handleSwitchChange"></el-switch>
                    </div>
                    <div class="setting-item">
                        <label>陀螺仪控制:</label>
                        <el-switch v-model="commonSettings.gyroControls" @change="handleSwitchChange"></el-switch>
                    </div>
                </div>

                <!-- 特定效果参数设置 -->
                <div v-if="selectedEffect === 'waves' && effectsEnabled" class="setting-section">
                    <h3>波浪效果参数</h3>
                    <div class="setting-item">
                        <label>颜色:</label>
                        <el-color-picker v-model="effectSettings.waves.colorHex" @change="updateWavesColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>波浪高度:</label>
                        <el-slider v-model="effectSettings.waves.waveHeight" :min="0" :max="40" :step="0.5" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>波浪速度:</label>
                        <el-slider v-model="effectSettings.waves.waveSpeed" :min="0" :max="2" :step="0.05" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>光泽度:</label>
                        <el-slider v-model="effectSettings.waves.shininess" :min="0" :max="150" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>缩放:</label>
                        <el-slider v-model="effectSettings.waves.zoom" :min="0.1" :max="2" :step="0.01" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'fog' && effectsEnabled" class="setting-section">
                    <h3>雾气效果参数</h3>
                    <div class="setting-item">
                        <label>高光颜色:</label>
                        <el-color-picker v-model="effectSettings.fog.highlightColorHex" @change="updateFogColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>中间色:</label>
                        <el-color-picker v-model="effectSettings.fog.midtoneColorHex" @change="updateFogColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>低光颜色:</label>
                        <el-color-picker v-model="effectSettings.fog.lowlightColorHex" @change="updateFogColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>模糊度:</label>
                        <el-slider v-model="effectSettings.fog.blur" :min="0" :max="1" :step="0.05" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>速度:</label>
                        <el-slider v-model="effectSettings.fog.speed" :min="0" :max="2" :step="0.05" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>密度:</label>
                        <el-slider v-model="effectSettings.fog.density" :min="0" :max="2" :step="0.05" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'birds' && effectsEnabled" class="setting-section">
                    <h3>鸟群效果参数</h3>
                    <div class="setting-item">
                        <label>鸟群数量:</label>
                        <el-slider v-model="effectSettings.birds.quantity" :min="1" :max="5" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.birds.backgroundColorHex" @change="updateBirdsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>速度:</label>
                        <el-slider v-model="effectSettings.birds.speedLimit" :min="1" :max="10" :step="0.5" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>分离度:</label>
                        <el-slider v-model="effectSettings.birds.separation" :min="1" :max="100" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>对齐度:</label>
                        <el-slider v-model="effectSettings.birds.alignment" :min="1" :max="100" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>内聚度:</label>
                        <el-slider v-model="effectSettings.birds.cohesion" :min="1" :max="100" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'net' && effectsEnabled" class="setting-section">
                    <h3>网格效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.net.backgroundColorHex" @change="updateNetColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>点数量:</label>
                        <el-slider v-model="effectSettings.net.points" :min="5" :max="20" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>最大距离:</label>
                        <el-slider v-model="effectSettings.net.maxDistance" :min="10" :max="40" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>间距:</label>
                        <el-slider v-model="effectSettings.net.spacing" :min="10" :max="30" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>显示点:</label>
                        <el-switch v-model="effectSettings.net.showDots" @change="handleSwitchChange"></el-switch>
                    </div>
                    <div class="setting-item">
                        <label>线宽度:</label>
                        <el-slider v-model="effectSettings.net.lineWidth" :min="0.5" :max="5" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'rings' && effectsEnabled" class="setting-section">
                    <h3>环形效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.rings.backgroundColorHex" @change="updateRingsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>背景透明度:</label>
                        <el-slider v-model="effectSettings.rings.backgroundAlpha" :min="0" :max="1" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>缩放比例:</label>
                        <el-slider v-model="effectSettings.rings.scale" :min="0.5" :max="2" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>移动端缩放比例:</label>
                        <el-slider v-model="effectSettings.rings.scaleMobile" :min="0.5" :max="2" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'cells' && effectsEnabled" class="setting-section">
                    <h3>细胞效果参数</h3>
                    <div class="setting-item">
                        <label>颜色1:</label>
                        <el-color-picker v-model="effectSettings.cells.color1Hex" @change="updateCellsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>颜色2:</label>
                        <el-color-picker v-model="effectSettings.cells.color2Hex" @change="updateCellsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>大小:</label>
                        <el-slider v-model="effectSettings.cells.size" :min="0.5" :max="5" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>速度:</label>
                        <el-slider v-model="effectSettings.cells.speed" :min="0.1" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'clouds' && effectsEnabled" class="setting-section">
                    <h3>云朵效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.clouds.backgroundColorHex" @change="updateCloudsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>天空颜色:</label>
                        <el-color-picker v-model="effectSettings.clouds.skyColorHex" @change="updateCloudsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>云朵颜色:</label>
                        <el-color-picker v-model="effectSettings.clouds.cloudColorHex" @change="updateCloudsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>云朵阴影颜色:</label>
                        <el-color-picker v-model="effectSettings.clouds.cloudShadowColorHex" @change="updateCloudsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>速度:</label>
                        <el-slider v-model="effectSettings.clouds.speed" :min="0.1" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'clouds2' && effectsEnabled" class="setting-section">
                    <h3>云朵2效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.clouds2.backgroundColorHex" @change="updateClouds2Colors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>天空颜色:</label>
                        <el-color-picker v-model="effectSettings.clouds2.skyColorHex" @change="updateClouds2Colors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>云朵颜色:</label>
                        <el-color-picker v-model="effectSettings.clouds2.cloudColorHex" @change="updateClouds2Colors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>速度:</label>
                        <el-slider v-model="effectSettings.clouds2.speed" :min="0.1" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'dots' && effectsEnabled" class="setting-section">
                    <h3>点阵效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.dots.backgroundColorHex" @change="updateDotsColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>大小:</label>
                        <el-slider v-model="effectSettings.dots.size" :min="1" :max="10" :step="0.5" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>间距:</label>
                        <el-slider v-model="effectSettings.dots.spacing" :min="10" :max="60" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>显示线条:</label>
                        <el-switch v-model="effectSettings.dots.showLines" @change="handleSwitchChange"></el-switch>
                    </div>
                </div>

                <div v-if="selectedEffect === 'globe' && effectsEnabled" class="setting-section">
                    <h3>地球效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.globe.backgroundColorHex" @change="updateGlobeColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>大小:</label>
                        <el-slider v-model="effectSettings.globe.size" :min="0.5" :max="2" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>间距:</label>
                        <el-slider v-model="effectSettings.globe.spacing" :min="5" :max="30" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>显示点:</label>
                        <el-switch v-model="effectSettings.globe.showDots" @change="handleSwitchChange"></el-switch>
                    </div>
                </div>

                <div v-if="selectedEffect === 'halo' && effectsEnabled" class="setting-section">
                    <h3>光环效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.halo.backgroundColorHex" @change="updateHaloColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>振幅因子:</label>
                        <el-slider v-model="effectSettings.halo.amplitudeFactor" :min="0.1" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>大小:</label>
                        <el-slider v-model="effectSettings.halo.size" :min="0.5" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'ripple'" class="setting-section">
                    <h3>波纹效果参数</h3>
                    <div class="setting-item">
                        <label>颜色1:</label>
                        <el-color-picker v-model="effectSettings.ripple.color1Hex" @change="updateRippleColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>颜色2:</label>
                        <el-color-picker v-model="effectSettings.ripple.color2Hex" @change="updateRippleColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.ripple.backgroundColorHex" @change="updateRippleColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>大小:</label>
                        <el-slider v-model="effectSettings.ripple.size" :min="0.5" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>速度:</label>
                        <el-slider v-model="effectSettings.ripple.speed" :min="0.1" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>

                <div v-if="selectedEffect === 'topology' && effectsEnabled" class="setting-section">
                    <h3>拓扑效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.topology.backgroundColorHex" @change="updateTopologyColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>点数量:</label>
                        <el-slider v-model="effectSettings.topology.points" :min="5" :max="20" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>最大距离:</label>
                        <el-slider v-model="effectSettings.topology.maxDistance" :min="10" :max="40" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>间距:</label>
                        <el-slider v-model="effectSettings.topology.spacing" :min="10" :max="30" :step="1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>显示点:</label>
                        <el-switch v-model="effectSettings.topology.showDots" @change="handleSwitchChange"></el-switch>
                    </div>
                </div>

                <div v-if="selectedEffect === 'trunk' && effectsEnabled" class="setting-section">
                    <h3>树干效果参数</h3>
                    <div class="setting-item">
                        <label>背景颜色:</label>
                        <el-color-picker v-model="effectSettings.trunk.backgroundColorHex" @change="updateTrunkColors"></el-color-picker>
                    </div>
                    <div class="setting-item">
                        <label>间距:</label>
                        <el-slider v-model="effectSettings.trunk.spacing" :min="0" :max="5" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                    <div class="setting-item">
                        <label>混沌度:</label>
                        <el-slider v-model="effectSettings.trunk.chaos" :min="0" :max="3" :step="0.1" @change="handleSliderChange" @input="handleSliderChange"></el-slider>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="resetToDefaults">重置默认值</el-button>
                    <el-button type="primary" @click="dialogVisible = false">取消</el-button>
                    <el-button type="success" @click="saveSettings">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const dialogVisible = ref(false);
const selectedColor = ref(localStorage.getItem('themeColor') || '#245282');
const selectedEffect = ref(localStorage.getItem('vantaEffect') || 'waves');
const effectsEnabled = ref(localStorage.getItem('effectsEnabled') !== 'false');

// 通用设置
const commonSettings = reactive({
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
});

// 特定效果设置
const effectSettings = reactive({
  waves: {
    colorHex: '#245282',
    color: 0x245282,
    shininess: 36.00,
    waveHeight: 23.50,
    waveSpeed: 0.50,
    zoom: 0.78,
  },
  fog: {
    highlightColorHex: '#ffc300',
    midtoneColorHex: '#ff1f00',
    lowlightColorHex: '#2d00ff',
    highlightColor: 0xffc300,
    midtoneColor: 0xff1f00,
    lowlightColor: 0x2d00ff,
    blur: 0.60,
    speed: 0.20,
    density: 0.8,
  },
  birds: {
    backgroundColorHex: '#1b1b1b',
    backgroundColor: 0x1b1b1b,
    quantity: 3,
    speedLimit: 5,
    separation: 20,
    alignment: 20,
    cohesion: 20,
  },
  net: {
    backgroundColorHex: '#23153c',
    backgroundColor: 0x23153c,
    points: 10,
    maxDistance: 20,
    spacing: 15,
    showDots: true,
    lineWidth: 1.0,
  },
  rings: {
    backgroundColorHex: '#1a3590',
    backgroundColor: 0x1a3590,
    backgroundAlpha: 1,
    scale: 1,
    scaleMobile: 1,
  },
  cells: {
    color1Hex: '#ffffff',
    color1: 0xffffff,
    color2Hex: '#000000',
    color2: 0x000000,
    size: 1.5,
    speed: 1.0,
  },
  clouds: {
    backgroundColorHex: '#1a3590',
    backgroundColor: 0x1a3590,
    skyColorHex: '#68b8d7',
    skyColor: 0x68b8d7,
    cloudColorHex: '#adc1de',
    cloudColor: 0xadc1de,
    cloudShadowColorHex: '#183550',
    cloudShadowColor: 0x183550,
    speed: 1.0,
  },
  clouds2: {
    backgroundColorHex: '#1a3590',
    backgroundColor: 0x1a3590,
    skyColorHex: '#64b5f6',
    skyColor: 0x64b5f6,
    cloudColorHex: '#ffffff',
    cloudColor: 0xffffff,
    speed: 1.0,
  },
  dots: {
    backgroundColorHex: '#23153c',
    backgroundColor: 0x23153c,
    size: 5.0,
    spacing: 35.0,
    showLines: true,
  },
  globe: {
    backgroundColorHex: '#23153c',
    backgroundColor: 0x23153c,
    size: 0.8,
    spacing: 15.0,
    showDots: true,
  },
  halo: {
    backgroundColorHex: '#000000',
    backgroundColor: 0x000000,
    amplitudeFactor: 1.0,
    size: 1.5,
  },
  ripple: {
    color1Hex: '#ffffff',
    color1: 0xffffff,
    color2Hex: '#000000',
    color2: 0x000000,
    backgroundColorHex: '#000000',
    backgroundColor: 0x000000,
    size: 1.0,
    speed: 1.0,
  },
  topology: {
    backgroundColorHex: '#000000',
    backgroundColor: 0x000000,
    points: 10,
    maxDistance: 20,
    spacing: 15,
    showDots: true,
  },
  trunk: {
    backgroundColorHex: '#98465f',
    backgroundColor: 0x98465f,
    spacing: 0,
    chaos: 1,
  }
});

// 十六进制颜色转换为数字
const hexToNumber = (hex: string): number => {
  return parseInt(hex.replace('#', ''), 16) || 0;
};

// 加载保存的设置
const loadSavedSettings = () => {
  try {
    // 加载特效开关状态
    const savedEffectsEnabled = localStorage.getItem('effectsEnabled');
    if (savedEffectsEnabled !== null) {
      effectsEnabled.value = savedEffectsEnabled !== 'false';
    }

    // 加载通用设置
    const savedCommonSettings = localStorage.getItem('vantaCommonSettings');
    if (savedCommonSettings) {
      const parsedSettings = JSON.parse(savedCommonSettings);
      Object.assign(commonSettings, parsedSettings);
    }

    // 加载效果特定设置
    const savedEffectSettings = localStorage.getItem('vantaEffectSettings');
    if (savedEffectSettings) {
      const parsedSettings = JSON.parse(savedEffectSettings);
      // 合并保存的设置到当前设置
      for (const effect in parsedSettings) {
        if (effect in effectSettings) {
          Object.assign(effectSettings[effect as keyof typeof effectSettings], parsedSettings[effect]);
        }
      }
    }

    // 确保所有颜色值正确转换
    updateAllColors();
  } catch (error) {
    console.error('加载保存的设置失败:', error);
  }
};

// 更新所有效果的颜色值
const updateAllColors = () => {
  updateWavesColors();
  updateFogColors();
  updateBirdsColors();
  updateNetColors();
  updateRingsColors();
  updateCellsColors();
  updateCloudsColors();
  updateClouds2Colors();
  updateDotsColors();
  updateGlobeColors();
  updateHaloColors();
  updateRippleColors();
  updateTopologyColors();
  updateTrunkColors();
};

// 更新波浪效果的颜色值
const updateWavesColors = () => {
  effectSettings.waves.color = hexToNumber(effectSettings.waves.colorHex);
  emitSettingsChange();
};

// 更新雾效果的颜色值
const updateFogColors = () => {
  effectSettings.fog.highlightColor = hexToNumber(effectSettings.fog.highlightColorHex);
  effectSettings.fog.midtoneColor = hexToNumber(effectSettings.fog.midtoneColorHex);
  effectSettings.fog.lowlightColor = hexToNumber(effectSettings.fog.lowlightColorHex);
  emitSettingsChange();
};

// 更新鸟群效果的颜色值
const updateBirdsColors = () => {
  effectSettings.birds.backgroundColor = hexToNumber(effectSettings.birds.backgroundColorHex);
  // birds 效果只有 backgroundColor 需要转换
  emitSettingsChange();
};

// 更新网格效果的颜色值
const updateNetColors = () => {
  effectSettings.net.backgroundColor = hexToNumber(effectSettings.net.backgroundColorHex);
  emitSettingsChange();
};

// 更新环形效果的颜色值
const updateRingsColors = () => {
  effectSettings.rings.backgroundColor = hexToNumber(effectSettings.rings.backgroundColorHex);
  emitSettingsChange();
};

// 更新细胞效果的颜色值
const updateCellsColors = () => {
  effectSettings.cells.color1 = hexToNumber(effectSettings.cells.color1Hex);
  effectSettings.cells.color2 = hexToNumber(effectSettings.cells.color2Hex);
  emitSettingsChange();
};

// 更新云朵效果的颜色值
const updateCloudsColors = () => {
  effectSettings.clouds.backgroundColor = hexToNumber(effectSettings.clouds.backgroundColorHex);
  effectSettings.clouds.skyColor = hexToNumber(effectSettings.clouds.skyColorHex);
  effectSettings.clouds.cloudColor = hexToNumber(effectSettings.clouds.cloudColorHex);
  effectSettings.clouds.cloudShadowColor = hexToNumber(effectSettings.clouds.cloudShadowColorHex);
  emitSettingsChange();
};

// 更新云朵2效果的颜色值
const updateClouds2Colors = () => {
  effectSettings.clouds2.backgroundColor = hexToNumber(effectSettings.clouds2.backgroundColorHex);
  effectSettings.clouds2.skyColor = hexToNumber(effectSettings.clouds2.skyColorHex);
  effectSettings.clouds2.cloudColor = hexToNumber(effectSettings.clouds2.cloudColorHex);
  emitSettingsChange();
};

// 更新点阵效果的颜色值
const updateDotsColors = () => {
  effectSettings.dots.backgroundColor = hexToNumber(effectSettings.dots.backgroundColorHex);
  emitSettingsChange();
};

// 更新地球效果的颜色值
const updateGlobeColors = () => {
  effectSettings.globe.backgroundColor = hexToNumber(effectSettings.globe.backgroundColorHex);
  emitSettingsChange();
};

// 更新光环效果的颜色值
const updateHaloColors = () => {
  effectSettings.halo.backgroundColor = hexToNumber(effectSettings.halo.backgroundColorHex);
  emitSettingsChange();
};

// 更新波纹效果的颜色值
const updateRippleColors = () => {
  effectSettings.ripple.color1 = hexToNumber(effectSettings.ripple.color1Hex);
  effectSettings.ripple.color2 = hexToNumber(effectSettings.ripple.color2Hex);
  effectSettings.ripple.backgroundColor = hexToNumber(effectSettings.ripple.backgroundColorHex);
  emitSettingsChange();
};

// 更新拓扑效果的颜色值
const updateTopologyColors = () => {
  effectSettings.topology.backgroundColor = hexToNumber(effectSettings.topology.backgroundColorHex);
  emitSettingsChange();
};

// 更新树干效果的颜色值
const updateTrunkColors = () => {
  effectSettings.trunk.backgroundColor = hexToNumber(effectSettings.trunk.backgroundColorHex);
  emitSettingsChange();
};

const emit = defineEmits(['color-change', 'effect-change', 'settings-change', 'effects-toggle']);

// 处理特效开关
const handleEffectsToggle = (enabled: boolean) => {
  effectsEnabled.value = enabled;
  localStorage.setItem('effectsEnabled', enabled.toString());
  emit('effects-toggle', enabled);
};

// 发送设置变更事件
const emitSettingsChange = () => {
  emit('settings-change', { 
    common: commonSettings, 
    effect: effectSettings[selectedEffect.value as keyof typeof effectSettings] || {}
  });
};

// 处理滑块值变化
const handleSliderChange = () => {
  emitSettingsChange();
};

// 处理开关值变化
const handleSwitchChange = () => {
  emitSettingsChange();
};

const openThemeSettings = () => {
  dialogVisible.value = true;
};

const handleColorChange = (color: string) => {
  selectedColor.value = color;
  emit('color-change', color);
};

const handleEffectChange = (effect: string) => {
  selectedEffect.value = effect;
  emit('effect-change', effect);
};

// 重置为默认值
const resetToDefaults = () => {
  // 重置通用设置
  Object.assign(commonSettings, {
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
  });

  // 重置效果特定设置
  Object.assign(effectSettings.waves, {
    colorHex: '#245282',
    shininess: 36.00,
    waveHeight: 23.50,
    waveSpeed: 0.50,
    zoom: 0.78,
  });
  updateWavesColors();

  Object.assign(effectSettings.fog, {
    highlightColorHex: '#ffc300',
    midtoneColorHex: '#ff1f00',
    lowlightColorHex: '#2d00ff',
    blur: 0.60,
    speed: 0.20,
    density: 0.8,
  });

  Object.assign(effectSettings.birds, {
    backgroundColorHex: '#1b1b1b',
    quantity: 3,
    speedLimit: 5,
    separation: 20,
    alignment: 20,
    cohesion: 20,
  });

  Object.assign(effectSettings.net, {
    backgroundColorHex: '#23153c',
    points: 10,
    maxDistance: 20,
    spacing: 15,
    showDots: true,
    lineWidth: 1.0,
  });

  Object.assign(effectSettings.rings, {
    backgroundColorHex: '#1a3590',
    backgroundAlpha: 1,
    scale: 1,
    scaleMobile: 1,
  });

  Object.assign(effectSettings.cells, {
    color1Hex: '#ffffff',
    color2Hex: '#000000',
    size: 1.5,
    speed: 1.0,
  });

  Object.assign(effectSettings.clouds, {
    backgroundColorHex: '#1a3590',
    skyColorHex: '#68b8d7',
    cloudColorHex: '#adc1de',
    cloudShadowColorHex: '#183550',
    speed: 1.0,
  });

  Object.assign(effectSettings.clouds2, {
    backgroundColorHex: '#1a3590',
    skyColorHex: '#64b5f6',
    cloudColorHex: '#ffffff',
    speed: 1.0,
  });

  Object.assign(effectSettings.dots, {
    backgroundColorHex: '#23153c',
    size: 5.0,
    spacing: 35.0,
    showLines: true,
  });

  Object.assign(effectSettings.globe, {
    backgroundColorHex: '#23153c',
    size: 0.8,
    spacing: 15.0,
    showDots: true,
  });

  Object.assign(effectSettings.halo, {
    backgroundColorHex: '#000000',
    amplitudeFactor: 1.0,
    size: 1.5,
  });

  Object.assign(effectSettings.ripple, {
    color1Hex: '#ffffff',
    color2Hex: '#000000',
    backgroundColorHex: '#000000',
    size: 1.0,
    speed: 1.0,
  });

  Object.assign(effectSettings.topology, {
    backgroundColorHex: '#000000',
    points: 10,
    maxDistance: 20,
    spacing: 15,
    showDots: true,
  });

  Object.assign(effectSettings.trunk, {
    backgroundColorHex: '#98465f',
    spacing: 0,
    chaos: 1,
  });

  // 更新所有颜色值
  updateAllColors();

  ElMessage.success('已重置为默认设置');
};

const saveSettings = () => {
  try {
    // 保存基本设置
    localStorage.setItem('themeColor', selectedColor.value);
    localStorage.setItem('vantaEffect', selectedEffect.value);
    localStorage.setItem('effectsEnabled', effectsEnabled.value.toString());
    
    // 保存通用设置
    localStorage.setItem('vantaCommonSettings', JSON.stringify(commonSettings));
    
    // 保存效果特定设置
    localStorage.setItem('vantaEffectSettings', JSON.stringify(effectSettings));
    
    // 发送事件通知
    emit('color-change', selectedColor.value);
    emit('effect-change', selectedEffect.value);
    emit('effects-toggle', effectsEnabled.value);
    emit('settings-change', { 
      common: commonSettings, 
      effect: effectSettings[selectedEffect.value as keyof typeof effectSettings] || {},
      effectsEnabled: effectsEnabled.value
    });
    
    ElMessage.success('设置已保存');
    dialogVisible.value = false;
  } catch (error) {
    console.error('保存设置到 localStorage 失败:', error);
    ElMessage.error('保存设置失败，请稍后重试');
  }
};

// 监听存储变化，同步更新设置
watch([selectedColor, selectedEffect], () => {
  handleColorChange(selectedColor.value);
  handleEffectChange(selectedEffect.value);
});

// 组件挂载时加载保存的设置
onMounted(() => {
  loadSavedSettings();
});
</script>

<style scoped>
/* 现代化按钮样式 */
.modern-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 2px; /* 缩短按钮之间的间距 */
}

.btn-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  min-width: 100px;
}

.btn-modern:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(129, 110, 216, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(129, 110, 216, 0.3);
}

.btn-modern:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(129, 110, 216, 0.2);
}

.btn-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.btn-modern:hover .btn-icon svg {
  transform: scale(1.1) rotate(15deg);
}

.btn-text {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.5px;
}

/* Theme按钮特殊效果 */
.theme-btn:hover {
  border-color: rgba(156, 39, 176, 0.5);
  box-shadow: 0 8px 25px rgba(156, 39, 176, 0.3);
}

.theme-btn .btn-icon svg {
  filter: drop-shadow(0 0 8px rgba(156, 39, 176, 0.3));
}

/* 响应式设计 */
@media (max-width: 768px) {
  .btn-modern {
    padding: 10px 16px;
    font-size: 13px;
    min-width: 80px;
  }
  
  .btn-icon {
    width: 16px;
    height: 16px;
  }
}

/* 设置对话框样式 */
.settings-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 10px;
}

.setting-section {
  border-radius: 0px;
  padding: 0px;
  backdrop-filter: blur(10px);
  border: 0px solid rgba(255, 255, 255, 0.2);
}

.setting-section h3 {
  margin-top: 0;
  margin-bottom: 5px;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
}

.setting-item {
  margin-bottom: 15px;
}

.setting-item label {
  display: block;
  margin-bottom: 5px;
  color: #818181;
  font-size: 14px;
}

.setting-item:last-child {
  margin-bottom: 0;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding-top: 10px;
}

/* 响应式布局 */
@media (min-width: 768px) {
  .settings-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .setting-section:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .settings-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
